<script setup>
import { reactive, ref, onMounted } from "vue";
import api from "../../api/index";
import { useStore } from 'vuex'
import { RouterLink, useRouter } from "vue-router";
import axios from "axios";

const store = useStore()
const router = useRouter()
const ordersSession = reactive([])//这是一个数组
const order_form = reactive({
  orderId: "",
  username: "",
  orderDate:"",
  shipAddress1:"",
  shipAddress2:"",
  shipCity:'',
  shipState:'',
  shipZip:'',
  shipCountry:'',
  billAddress1:'',
  billAddress2:'',
  billCity:'',
  billZip:'',
  billCountry:'',
  billState:'',
  courier:'',
  totalPrice:'',
  billToFirstName:'',
  billToLastName:'',
  shipToFirstName:'',
  shipToLastName:'',
  creditCard:'',
  expiryDate:'',
  cardType:'',
  locale:'',
  status:'',
  state:'',
  sendOut:'',
  lineItems:[
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    },
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    },
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    }
  ]
})

const account = reactive({
  account_userid:'0',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})

const payInfo = reactive({
  outTradeNo: '1001',
  subject: 'dog',
  totalAmount: "1234",
  body: '好狗'
})

onMounted(() => {
  console.log(store.state.account_userid);
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  console.log(account.account_userid);
  getData()
})

const getData = () =>{
  //获取持久化对象的值
  console.log(store.state.orderId);
  //将持久化对象session的值赋给order_form
  order_form.orderId=store.state.Order_orderId;
  order_form.username=store.state.Order_username;
  order_form.orderDate=store.state.Order_orderDate;
  order_form.shipAddress1=store.state.Order_shipAddress1;
  order_form.shipAddress2=store.state.Order_shipAddress2;
  order_form.shipCity=store.state.Order_shipCity;
  order_form.shipState=store.state.Order_shipState;
  order_form.shipZip=store.state.Order_shipZip;
  order_form.shipCountry=store.state.Order_shipCountry;
  order_form.billAddress1=store.state.Order_billAddress1;
  order_form.billAddress2=store.state.Order_billAddress2;
  order_form.billCity=store.state.Order_billCity;
  order_form.billZip=store.state.Order_billZip;
  order_form.billCountry=store.state.Order_billCountry;
  order_form.billState=store.state.Order_billState;
  order_form.courier=store.state.Order_courier;
  order_form.totalPrice=store.state.Order_totalPrice;
  order_form.billToFirstName=store.state.Order_billToFirstName;
  order_form.billToLastName=store.state.Order_billToLastName;
  order_form.shipToFirstName=store.state.Order_shipToFirstName;
  order_form.shipToLastName=store.state.Order_shipToLastName;
  order_form.creditCard=store.state.Order_creditCard;
  order_form.expiryDate=store.state.Order_expiryDate;
  order_form.cardType=store.state.Order_cardType;
  order_form.locale=store.state.Order_locale;
  order_form.status=store.state.Order_status;
  order_form.state=store.state.Order_state;
  order_form.sendOut=store.state.Order_sendOut;
  order_form.lineItems=store.state.Order_lineItems;
  console.log("测试lineItems: 结论：成功！");
  console.log(order_form.lineItems);
  //调用payForm，实现后端库存、orderId的逻辑。
  api.payForm().then(res => {
    //这里首先要判断一下状态码
    var statusCode = res.data.status;
    console.log("statusCode is : "+statusCode);
    if (statusCode == "400"){
      console.log(res.data.message);
      //这里接收到了错误信息，按逻辑来说应该是库存不够了报错了。
    }else if (statusCode == "200"){
      //这里接收到了一个新的订单，这个订单的订单编号是正确的，不是0，所以我们的持久化order和order_form都要改！
      ordersSession.splice(0, ordersSession.length)//清空旧数据
      ordersSession.push(...res.data.data);//update,from date results,第一个data是http里的，这个data包括我们的status,message和data。第二个data是我们commonResponse里面的，存的就是orderList.
      console.log(ordersSession);
      //存给order_form
      order_form.orderId=ordersSession[0].orderId;
      console.log("order_form.orderId is : "+order_form.orderId);
      store.commit("setOrderOrderId",ordersSession[0].orderId);
      //修改订单号和商品名称
      //订单编号
      payInfo.outTradeNo=order_form.orderId;
      //商品名称
      payInfo.subject=ordersSession[0].lineItems[0].item.attribute1;
      //商品价格
      payInfo.totalAmount=order_form.totalPrice;
      //商品体
      payInfo.body=ordersSession[0].lineItems[0].item.attribute1;
      console.log("订单编号:"+payInfo.outTradeNo+"/n"+
                  "商品名称:"+payInfo.subject+"/n"+
                  "商品价格:"+payInfo.totalAmount+"/n"+
                   "商品体:"+payInfo.body+"/n")
    }
  })
}

const submit = () =>{
    if (store.state.cardExist != "Card"){
      console.log("go to payForm");
      axios.get('http://127.0.0.1:8088/order/alipay?outTradeNo='+payInfo.outTradeNo+"&subject="+payInfo.subject+"&totalAmount="+payInfo.totalAmount+"&body="+payInfo.body)
          .then(resp => {
            //添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
            console.log("back to payForm");
            const divForm = document.getElementsByTagName('div')
            if (divForm.length) {
              document.body.removeChild(divForm[0])
            }
            const div = document.createElement('div')
            div.innerHTML = resp.data // data就是接口返回的form 表单字符串
            document.body.appendChild(div)
            document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
            document.forms[0].submit()
          })
    }else{
      router.push('/orders/paySuccess');
    }
}

const signOff = () =>{
  //清除客户端的session
  store.commit("setAccountUserid",'');
  store.commit("setAccountEmail",'');
  store.commit("setAccountFirstName",'');
  store.commit("setAccountLastName",'');
  store.commit("setAccountStatus",'');
  store.commit("setAccountAddr1",'');
  store.commit("setAccountAddr2",'');
  store.commit("setAccountCity",'');
  store.commit("setAccountState",'');
  store.commit("setAccountZip",'');
  store.commit("setAccountCountry",'');
  store.commit("setAccountPhone",'');
  store.commit("setAccountfavCategory",'');
  //清楚服务端的session，这里又要请求服务器了，我先不写吧。
  //清楚页面中的account
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  //重返本页面
  // 使用 location.reload() 方法重新刷新页面
  location.reload();
}

</script>


<template>
  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <router-link to="/main"><a class="item">首页</a></router-link>
      </div>
      <div class="right">

        <template v-if="account.account_userid !== undefined">
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <a @click="signOff" class="item">退出登录</a>
          <router-link to="/account/myAccountForm"><a href="#" class="item">个人主页</a></router-link>
        </template>

        <template v-else>
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <router-link to="/account/registerForm"><a href="#" class="item">注册</a></router-link>
          <router-link to="/account/signonForm"><a href="#" class="item">登录</a></router-link>
        </template>

      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>

        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>

      </div>
    </div>
    <div class="main-promote">
<!--以上是头部信息-->
      <div id="BackLink">
        <a href="main">回到主界面</a>
      </div>
      <div class="Order" align="center">
        <table class="table-2 firstTable">
          <tr>
            <th align="center" colspan="2"><font size="4"><b>订单</b></font>
              <br />
              <font size="3"><b>
<!--                <fmt:formatDate value="${sessionScope.order.orderDate}" pattern="yyyy/MM/dd hh:mm:ss" />-->
                <input v-model="order_form.orderDate">
              </b></font>
            </th>
          </tr>

          <tr>
            <th colspan="2">账单细节</th>
          </tr>
          <tr>
            <td>姓:</td>
            <td><input type="text" name="billToFirstName" v-model="order_form.billToFirstName" ></td>
          </tr>
          <tr>
            <td>名:</td>
            <td><input type="text" name="billToLastName" v-model="order_form.billToLastName" /></td>
          </tr>
          <tr>
            <td>地址1:</td>
            <td><input type="text" size="40" name="billAddress1" v-model="order_form.billAddress1" /></td>
          </tr>
          <tr>
            <td>地址2:</td>
            <td><input type="text" size="40" name="billAddress2" v-model="order_form.billAddress2" /></td>
          </tr>
          <tr>
            <td>城市:</td>
            <td><input type="text" name="billCity" v-model="order_form.billCity" /></td>
          </tr>
          <tr>
            <td>省份:</td>
            <td><input type="text" size="4" name="billState" v-model="order_form.billState" /></td>
          </tr>
          <tr>
            <td>邮政编码:</td>
            <td><input type="text" size="10" name="billZip" v-model="order_form.billZip" /></td>
          </tr>
          <tr>
            <td>国家:</td>
            <td><input type="text" size="15" name="billCountry" v-model="order_form.billCountry" /></td>
          </tr>
          <tr>
            <th colspan="2">寄送地址</th>
          </tr>
          <tr>
            <td>姓:</td>
            <td><input type="text" name="shipToFirstName" v-model="order_form.shipToLastName" class="shippingCompleteContext"/></td>
          </tr>
          <tr>
            <td>名:</td>
            <td><input type="text" name="shipToLastName"  v-model="order_form.shipToFirstName" class="shippingCompleteContext"/></td>
          </tr>
          <tr>
            <td>地址1:</td>
            <td><input type="text" size="40" name="shipAddress1" v-model="order_form.shipAddress1" class="shippingCompleteContext"/></td>
          </tr>
          <tr>
            <td>地址2:</td>
            <td><input type="text" size="40" name="shipAddress2" v-model="order_form.shipAddress2" class="shippingCompleteContext"/></td>
          </tr>
          <tr>
            <td>城市:</td>
            <td><input type="text" name="shipCity" v-model="order_form.shipCity" class="shippingCompleteContext"/></td>
          </tr>
          <tr>
            <td>省份:</td>
            <td><input type="text" size="4" name="shipState" v-model="order_form.shipState" class="shippingCompleteContext"/></td>
          </tr>
          <tr>
            <td>邮政编码:</td>
            <td><input type="text" size="10" name="shipZip" v-model="order_form.shipZip" class="shippingCompleteContext"/></td>
          </tr>
          <tr>
            <td>国家:</td>
            <td><input type="text" size="15" name="shipCountry" v-model="order_form.shipCountry" class="shippingCompleteContext"/></td>
          </tr>
        </table>
        <br>
        <button class="buttonContinue" style="height:50px;width:100px;" @click="submit()">确认订单</button>
      </div>
<!--<router-link to="/orders/viewOrder"><button>测试按钮</button></router-link>-->
<!--以下是尾部信息-->
    </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </body>
</template>


<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>